<template>
  <lc-chart-scatter
    ref="scatterRef"
    :options="scatterOptions"
    :map-options="scatterMapOptions"
    :data="scatterData"
    style="--height: 300px"
  >
  </lc-chart-scatter>
</template>

<script setup>
import { ref } from "vue";

import { request } from "@/apis/request";
defineOptions({
  name: "Scatter",
});

const scatterRef = ref(null);
const scatterData = ref([]);
const scatterMapOptions = ref({});
const scatterOptions = ref({
  title: { text: "", top: 10, left: 10 },
  legend: { right: 10, top: 10 },
  tooltip: {
    trigger: "item",
    formatter: "",
    axisPointer: {
      show: true,
      type: "cross",
      lineStyle: { type: "dashed", width: 1 },
    },
  },
  grid: {
    left: "6%",
    top: "20%",
    right: "5%",
    bottom: "10%",
    containLabel: true,
  },
  xAxis: [
    {
      type: "value",
      name: "",
      scale: true,
      axisLabel: { formatter: "{value}" },
      splitLine: { show: false },
    },
  ],
  yAxis: [
    {
      type: "value",
      name: "",
      scale: true,
      axisLabel: { formatter: "{value}" },
      splitLine: { show: false },
    },
  ],
  series: {
    type: "scatter",
    emphasis: { focus: "series" },
    markPoint: {
      data: [
        { type: "max", name: "Max" },
        { type: "min", name: "Min" },
      ],
    },
    markLine: {
      lineStyle: { type: "solid" },
      data: [{ type: "average", name: "AVG" }],
    },
  },
});

const getScatterData = async () => {
  try {
    let params = { url: "", method: "get", params: {} };
    const res = await request(params);
    if (res) {
      scatterData.value = res.data || [];
    }
  } catch (e) {
    console.error("获取数据出错: " + e);
  }
};
getScatterData();
</script>
